@import './LineDecorator.scss';

.blob {
    position: relative;
    overflow: auto;
    padding-top: 0.5rem;
    tab-size: 4;
    display: flex;
    background-color: var(--code-bg);

    &__code {
        flex: 1;

        table {
            border-collapse: collapse;

            .theme-redesign & {
                // Give room to view the last few lines of code
                // without the floating status bar getting in the way.
                &::after {
                    content: '';
                    display: inline-block;
                    padding-bottom: calc(var(--blob-status-bar-height) + var(--blob-status-bar-vertical-gap) + 0.5rem);
                    // Extra 0.5rem padding on top of the minimum required to expose code;
                }
            }
        }

        td.line {
            &::before {
                // draw line number with css so it cannot be copied to clipboard
                content: attr(data-line);
            }

            text-align: right;
            padding-left: 0.5rem;
            min-width: 2rem;
            user-select: none;
            vertical-align: top;
            color: var(--line-number-color);
        }

        tr {
            transition: background 200ms ease-out;
            &.selected {
                background: var(--code-selection-bg);
            }
        }

        td.line,
        td.code {
            padding: 0;
        }

        td.code {
            width: 100%;
            padding-left: 1rem;
            white-space: pre;

            div {
                display: inline-block;
            }

            .line-decoration-attachment-portal {
                span::before {
                    content: attr(data-contents);
                }
            }
        }

        &--wrapped {
            td.code {
                white-space: pre-wrap;
            }
        }
    }
}

// Styles for floating + scrollable status bar
.blob-status-bar {
    // Add this class to the parent container of <Blob> and <StatusBar>.
    // Why not add this to <Blob>? Absolutely-positioned elements
    // in a scrolling overflow container move with the content on scroll.
    // See: https://www.bennadel.com/blog/3409-using-position-absolute-inside-a-scrolling-overflow-container.htm
    // Unfortunately, <StatusBar> can overlap with <Blob>'s scrollbar, so calculate <StatusBar>'s
    // `right` and `maxWidth` at runtime.
    &__container {
        position: relative;

        --blob-status-bar-height: 2rem;
        // Used to calculate status bar `bottom` along with scrollbar width.
        --blob-status-bar-vertical-gap: 1rem;
        // Used to calculate status bar `right` along with scrollbar width.
        --blob-status-bar-horizontal-gap: 0.5rem;
    }

    // Add this class to <StatusBar>
    &__body {
        // Make the status bar "float" slightly above the bottom of the code view.
        position: absolute;
        bottom: var(--blob-status-bar-vertical-gap);

        // Override default bootstrap `.w-100`, ensure that the status bar "sticks" to the right side.
        width: auto !important;
        // Default `right`, should be added with scrollbar width at runtime.
        right: var(--blob-status-bar-horizontal-gap);
        // `maxWidth` will also be subtracted by scrollbar width at runtime
        max-width: calc(100% - (2 * var(--blob-status-bar-horizontal-gap)));

        // Misc. style
        height: var(--blob-status-bar-height);
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        background-color: var(--body-bg);
        color: var(--body-color);
    }
}
